<script setup>
import ThreeParts from '@/layout/SubLayout/ThreeParts.vue'
import { requestConfig } from '@/config'
import { SmartStaffApi } from '@/api/index'
import { robotTypefakeRoots } from '@/pages/__view-constant/index'

const data = reactive({
  robotTypeGraphReady: false,
  robotTaskRunStatusReady: false,
  alarmStatsDataReady: false,
  alarmRecordDataReady: false,
})

// fetch智能员工类型分布
const { data: resRobotTypeGraph } = useRequest(SmartStaffApi.getRobotTypeGraph, {
  // ...requestConfig.pollingNormal, // @pos:确认是否需要轮询
  onFinally: () => {
    data.robotTypeGraphReady = true
  },
})

const { data: resRobotTaskRunStatus } = useRequest(SmartStaffApi.getRobotTaskRunStatus, {
  ...requestConfig.pollingNormal,
  pollingInterval: 1000 * 60 * 10, // 10分钟轮询一次
  onFinally: () => {
    data.robotTaskRunStatusReady = true
  },
})

const { data: resRobotStatus } = useRequest(SmartStaffApi.getRobotStatus)

// const { data: resAlarmStats } = useRequest(SmartStaffApi.mockgetAlarmStats, { // @fixme
const { data: resAlarmStats } = useRequest(SmartStaffApi.getAlarmStats, {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.alarmStatsDataReady = true
  },
})

const { data: resAlarmRecord } = useRequest(SmartStaffApi.getAlarmRecordList, {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.alarmRecordDataReady = true
  },
})

const {
  robotTypeGraphReady,
  robotTaskRunStatusReady,
  alarmStatsDataReady,
  alarmRecordDataReady,
} = toRefs(data)
</script>

<template>
  <ThreeParts>
    <template #left>
      <div style="height:27.0925%">
        <UiPanel title="智能员工类型分布" stretch title-length="8">
          <RobotRelationGraph :data="resRobotTypeGraph?.data || {}" :fake-roots="robotTypefakeRoots" :ready="robotTypeGraphReady" />
        </UiPanel>
      </div>
      <div style="flex:1;min-height: 0;" class="mt-26px">
        <UiPanel title="今日智能员工任务执行情况" stretch title-length="10">
          <SmartTaskInfoList :data="resRobotTaskRunStatus?.data || []" :ready="robotTaskRunStatusReady" />
        </UiPanel>
      </div>
    </template>
    <template #center>
      <div style="height: 100%;padding: 22px 40px;">
        <RobotTaskFlow :status="resRobotStatus" />
      </div>
    </template>
    <template #right>
      <div style="height:15.8590%">
        <UiPanel title="智能员工状态监控" stretch title-length="8">
          <RobotStatusWatch :data="resRobotStatus?.data || {}" />
        </UiPanel>
      </div>
      <div style="height:28.6344%" class="mt-26px">
        <UiPanel title="报警统计" stretch>
          <ChartAlarmStats :data="resAlarmStats?.data || []" :ready="alarmStatsDataReady" />
        </UiPanel>
      </div>
      <div style="flex:1;min-height: 0;" class="mt-26px">
        <UiPanel title="报警列表" stretch>
          <AlarmRecordList :data="resAlarmRecord?.data || [] " :ready="alarmRecordDataReady" />
        </UiPanel>
      </div>
    </template>
  </ThreeParts>
</template>

<page-meta lang="yaml">
title: 智能员工
layout: main
</page-meta>

<style lang='scss' scoped>

</style>
